var main_vm = new Vue({
    el: 'main',
    data: {
        keywords: null,
        query: null,
        department_query:null,
        list: [],
        total: null,
        current_page: 1,
        last_page: 1,
        current_id: null,
        current_item: null,
        formData: {
            name: null,
            department_id: null,
            post_id: null,
            role_id: null,
            mobile: null,
            username: null,
            password: null,
            address: null
        },
        departments: [],
        posts: [],
        roles: [],
        selectedList: [],
        checkList: [],
        selectAll: false,
        turn_page: 1
    },
    computed: {
        token() {
            return localStorage.token || Cookies.get('token')
        }
    },
    watch: {
        list() {
            this.checkList = []
            if (this.list.length) {
                for (var i = 0; i < this.list.length; i++) {
                    this.checkList.push(this.list[i].id)
                }
            }
        },
        selectAll(val) {
            if (val) {
                this.selectedList = this.checkList
            } else {
                if (this.selectedList == this.checkList) {
                    this.selectedList = []
                }
            }
        },
        selectedList() {
            this.selectedList.length == this.checkList.length ? this.selectAll = true : this.selectAll = false
        },
        keywords(val) {
            if (val == "" || val == null) {
                this.query = null
            }
        }
    },
    methods: {
        getList() {
            var self = this
            axios.get(window.config.host + '/users', {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    params: {
                        name: this.query,
                        page: this.current_page,
                        department_id:this.department_query
                    }
                })
                .then(function(res) {
                    console.log(res)
                    if (res.status == 200) {
                        self.list = res.data.data.data
                        self.total = res.data.data.total
                        self.current_page = res.data.data.current_page
                        self.last_page = res.data.data.last_page
                    } else {
                        alert(res.data.message)
                    }
                })
                .catch(function(res) {

                })
        },
        search() {
            this.query = this.keywords
            this.current_page = 1
            this.getList()
        },
        getByDepartment(){
            this.current_page = 1
            this.query = this.keywords = null
            this.getList()
        },
        getDepartments() {
            var self = this
            axios.get(window.config.host + '/departments_all', {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    }
                })
                .then(function(res) {
                    if (res.status == 200) {
                        self.departments = res.data.data
                    } else {
                        alert(res.data.message)
                    }
                })
        },
        getPosts() {
            var self = this
            axios.get(window.config.host + '/posts_all', {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    }
                })
                .then(function(res) {
                    if (res.status == 200) {
                        self.posts = res.data.data
                    } else {
                        alert(res.data.message)
                    }
                })
        },
        getRoles() {
            var self = this
            axios.get(window.config.host + '/roles', {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    }
                })
                .then(function(res) {
                    if (res.status == 200) {
                        self.roles = res.data.data
                    } else {
                        alert(res.data.message)
                    }
                })
        },
        checkStaff(){
            var exp = /^[a-zA-Z0-9]{6,20}$/
            if(!exp.test(this.formData.username)){
                alert('请输入符合要求的用户名')
                return false
            }else if(!exp.test(this.formData.password)){
                alert('请输入符合要求的密码')
                return false
            }else{
                return true
            }
        },
        addStaff() {
            if(!this.checkStaff()){
                return false
            }
            var target = event.currentTarget
            $(target).button('loading');
            var self = this
            axios.post(window.config.host + '/users', this.formData, {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    }
                })
                .then(function(res) {
                    console.log(res)
                    if (res.status == 200) {
                        alert('添加成功')
                        $('#modal-form').modal('hide')
                        self.getList()
                    } else {
                        alert(res.data.message)
                    }
                })
                .catch(function(err) {

                })
                .then(function() {
                    $(target).button('reset');
                })
        },
        openEdit(item) {
            this.current_id = item.id
            this.formData = {
                name: item.name,
                department_id: item.department_id,
                post_id: item.post_id,
                role_id: item.roles[0].id,
                mobile: item.mobile,
                username: item.username,
                password: item.password,
                address: item.address
            }
            $('#modal-form').modal('show')
        },
        editStaff() {
            if(!this.checkStaff()){
                return false
            }
            var target = event.currentTarget
            $(target).button('loading');
            var self = this
            axios.put(window.config.host + '/users/' + this.current_id, this.formData, {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    }
                })
                .then(function(res) {
                    if (res.status == 200) {
                        alert('修改成功')
                        $('#modal-form').modal('hide')
                        self.getList()
                    } else {
                        alert(res.data.message)
                    }
                })
                .catch(function(err) {

                })
                .then(function() {
                    $(target).button('reset');
                })
        },
        submitForm() {
            this.current_id ? this.editStaff() : this.addStaff()
        },
        openDetails(item) {
            this.current_item = item
            $('#modal-details').modal('show')
        },
        resetPass(item){
            if(confirm('是否将密码重置为123456？')){

            }else{
                return false;
            }
            var self = this
            axios.put(window.config.host + '/initialise/'+item.id,{},{
                headers: {
                        Authorization: 'Bearer ' + this.token
                    }
                })
            .then(function(res){
                if(res.status == 200){
                    alert('重置密码成功')
                    self.getList()
                }else{
                    alert(res.data.message)
                }
            })
            .catch(function(err){
                console.log(err)
            })
        },
        deleteItems() {
            if (!confirm('确定要删除所选项？')) {
                return;
            }
            var self = this
            axios.delete(window.config.host + '/users', {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    params: {
                        ids: this.selectedList
                    }
                })
                .then(function(res) {
                    if (res.status == 200) {
                        self.current_page = 1
                        self.selectAll = false
                        self.getList()
                    } else {
                        alert(res.data.message)
                    }
                })
                .catch(function(err) {

                })
        },
        modalInt() {
            var self = this
            $('#modal-form').modal({
                show: false
            })

            $('#modal-form').on('hide.bs.modal', function(e) {
                self.current_id = null
                self.formData = {
                    department_id: null,
                    name: null,
                    description: null
                }
            })

            $('#modal-details').modal({
                show: false
            })

            $('#modal-details').on('hide.bs.modal', function(e) {
                self.current_item = null
            })
        },
        pageTurn(num) {
            this.current_page = this.current_page + num
            console.log(this.current_page)
            this.getList()
        },
        toPage() {
            if (this.turn_page <= this.total) {
                this.current_page = this.turn_page
                this.getList()
            }
        }
    },
    mounted() {
        this.getList()
        this.getDepartments()
        this.getPosts()
        this.getRoles()
        this.modalInt()
    }
})